<template>
  <div class="mine-box admin-order-box editrule-box">
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>
      <div class="m-moneybox">
        <div class="fleft">
          {{ruleData.changeName}}
        </div>
        <div v-if="ruleData.ruleType=='10002'" class="fright sx-text" @click="newrule" style="line-height: unset">新建
        </div>
      </div>
    </div>
    <div class="e-rule-box List">
      <div class="e-rule-single" v-for="(item,index) in ruleList" :key="index">
        <mu-row gutter class="e-rule-box1">
          <mu-col span="3" v-if="item.type!=2">
            <div class="grid-cell">
              <p>时长(h)</p>
              <p class="num">{{item.time}}</p>
            </div>
          </mu-col>
          <mu-col span="3" v-if="item.type!=2">
            <div class="grid-cell">
              <p>费用(元)</p>
              <p class="num">{{item.price}}</p>
            </div>
          </mu-col>
          <mu-col span="3">
            <div class="grid-cell">
              <p>单价/h</p>
              <p class="num">{{item.hours}}</p>
            </div>
          </mu-col>
          <mu-col span="3">
            <div class="grid-cell">
              <p>类型</p>
              <p class="num">{{item.typeName}}</p>
            </div>
          </mu-col>
        </mu-row>
        <p class="text">收费类型 : {{item.changeTypeName}}</p>
        <p class="text">创建时间 : {{item.createtime || '暂无'}}</p>
        <mu-row gutter class="e-rule-box2">
          <mu-col span="8">
            <div class="grid-cell">
              <mu-button class="blur-btn btn bj" @click="showEdit(item)">编辑</mu-button>
            </div>
          </mu-col>
          <mu-col span="2">
            <mu-button
              v-if="ruleData.ruleType=='10002'&&!(item.chargeType=='3002'&&item.type=='1')&&!(item.chargeType=='3001'&&item.type=='2')"
              class="jian btn" @click="deleterule(item.id)">-
            </mu-button>
          </mu-col>
        </mu-row>
      </div>
      <div v-show="nolist" class="nolist">
        <span class="iconfont icon-charging"></span>
        <p>暂无规则价格记录</p>
      </div>
    </div>
    <mu-bottom-sheet :open.sync="Shownew" class="card-choose newcard-box editrule-box-2">
      <mu-form :model="newdata" label-width="100">
        <span class="iconfont icon-xialajiantou" @click="Shownew=false"></span>
        <p class="title">新建规则价格</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">计费类型</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入计费类型"
                icon="comment"
                v-model="newchargeType"
                readonly
                @click="mtypeShow=false"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">类型</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入类型"
                icon="comment"
                v-model="newtype"
                readonly
                @click="typeShow=false"
              />
            </div>
          </mu-list-item>
          <mu-list-item v-if="hiddenClassForDegree">
            <div class="choose-input-box">
              <span class="fleft">时长</span>
              <input
                maxlength="5"
                type="text"
                class="choose-input fright"
                placeholder="请输入时长"
                icon="comment"
                v-model="newdata.time"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>

          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">单价/h</span>
              <input
                maxlength="5"
                type="text"
                class="choose-input fright"
                placeholder="请输入单价"
                icon="comment"
                v-model="newdata.hours"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>

          <mu-list-item v-if="hiddenClassForDegree">
            <div class="choose-input-box">
              <span class="fleft">费用(元)</span>
              <input
                maxlength="5"
                type="text"
                class="choose-input fright"
                placeholder="请输入费用"
                icon="comment"
                v-model="newdata.price"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>

          <mu-list-item v-if="hiddenClassForDegree&&exceedClass">
            <div class="choose-input-box">
              <span class="fleft">超出时间</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="规则大于某值"
                icon="comment"
                v-model="newdata.granternum"
              />
            </div>
          </mu-list-item>
          <mu-list-item v-if="hiddenClassForDegree&&exceedClass">
            <div class="choose-input-box">
              <span class="fleft">超出价格</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="规则大于某值时价格"
                icon="comment"
                v-model="newdata.granterprice"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <mu-button class="btn big-btn" @click="newrule2">确定</mu-button>
          </mu-list-item>
        </mu-list>
        <van-popup v-model="mtypeShow" position="bottom" class="bottom-picker">
          <van-picker
            :columns="mtypeList"
            @confirm="newmtypeChange"
            show-toolbar
            title="请选择计费类型"
            cancel-button-text=" "
          />
        </van-popup>
        <van-popup v-model="typeShow" position="bottom" class="bottom-picker">
          <van-picker
            :columns="typeList"
            @confirm="newtypeChange"
            show-toolbar
            title="请选择类型"
            cancel-button-text=" "
          />
        </van-popup>
      </mu-form>
    </mu-bottom-sheet>
    <mu-bottom-sheet :open.sync="Showedit" class="card-choose newcard-box editrule-box-2">
      <mu-form :model="edit" label-width="100">
        <span class="iconfont icon-xialajiantou" @click="Showedit=false"></span>
        <p class="title">编辑规则价格</p>
        <mu-list>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">计费类型</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入计费类型"
                icon="comment"
                readonly
                v-model="editchargeType"
                @click="mtypeShow=false"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">类型</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="请输入类型"
                icon="comment"
                v-model="edittype"
                readonly
                @click="typeShow=false"
              />
            </div>
          </mu-list-item>
          <mu-list-item v-if="hiddenClassForDegree">
            <div class="choose-input-box">
              <span class="fleft">时长</span>
              <input
                type="text"
                maxlength="5"
                class="choose-input fright"
                placeholder="请输入时长"
                icon="comment"
                v-model="edit.time"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <div class="choose-input-box">
              <span class="fleft">单价/h</span>
              <input
                type="text"
                maxlength="5"
                class="choose-input fright"
                placeholder="请输入单价"
                icon="comment"
                v-model="edit.hours"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>

          <mu-list-item v-if="hiddenClassForDegree">
            <div class="choose-input-box">
              <span class="fleft">费用(元)</span>
              <input
                maxlength="5"
                type="text"
                class="choose-input fright"
                placeholder="请输入费用"
                icon="comment"
                v-model="edit.price"
                @focus="inputFocus()" @focusout="inputFocusOut"
              />
            </div>
          </mu-list-item>


          <mu-list-item v-if="hiddenClassForDegree&&exceedClass">
            <div class="choose-input-box">
              <span class="fleft">超出时间</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="规则大于某值"
                icon="comment"
                v-model="edit.granternum"
              />
            </div>
          </mu-list-item>
          <mu-list-item v-if="hiddenClassForDegree&&exceedClass">
            <div class="choose-input-box">
              <span class="fleft">超出价格</span>
              <input
                type="text"
                class="choose-input fright"
                placeholder="规则大于某值时价格"
                icon="comment"
                v-model="edit.granterprice"
              />
            </div>
          </mu-list-item>
          <mu-list-item>
            <mu-button class="btn big-btn" @click="editrule">确定</mu-button>
          </mu-list-item>
        </mu-list>
      </mu-form>
      <van-popup v-model="mtypeShow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="mtypeList"
          @confirm="editmtypeChange"
          show-toolbar
          title="请选择计费类型"
          cancel-button-text=" "
        />
      </van-popup>
      <van-popup v-model="typeShow" position="bottom" class="bottom-picker">
        <van-picker
          :columns="typeList"
          @confirm="edittypeChange"
          show-toolbar
          title="请选择类型"
          cancel-button-text=" "
        />
      </van-popup>
    </mu-bottom-sheet>
  </div>
</template>
<script>
    import Vue from "vue";
    import {Toast, Popup, Picker} from "vant";
    import "vant/lib/toast/style/index";
    import "vant/lib/popup/style/index";
    import "vant/lib/picker/style/index";

    Vue.use(Popup);
    Vue.use(Picker);
    export default {
        data() {
            return {
                timer:null,
                ruleData: {},
                ruleKeyword: "",
                Showedit: false,
                Shownew: false,
                nolist: true,
                mtypeShow: false,
                typeShow: false,
                editchargeType: "",
                edittype: "",
                newchargeType: "",
                newtype: "",
                back: {
                    background:
                        "url(" + require("../../../assets/image/minebackimg.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "cover"
                },
                edit: {
                    ruleId: this.$route.params.id,
                    id: "",
                    chargeType: "",
                    time: "",
                    price: "",
                    hours: "",
                    type: "",
                    granternum: "",
                    granterprice: ""
                },
                newdata: {
                    ruleId: this.$route.params.id,
                    chargeType: "",
                    time: "",
                    price: "",
                    hours: "",
                    type: "",
                    granternum: "",
                    granterprice: ""
                },
                id: this.$route.params.id,
                ruleList: [],
                mtypeList: [],
                hiddenClassForDegree: true,
                exceedClass: true,
                typeList: [{text: "固定", id: 1}, {text: "自定义时长", id: 2}]
            };
        },
        watch: {
            ruleList: function (v) {
                if (v == "") {
                    this.nolist = true;
                } else {
                    this.nolist = false;
                }
            },
            'edit.hours': {
                handler: function (v) {
                    if (v && this.edit.time) {
                        this.edit.price = v * this.edit.time
                    }
                }
            },
            'newdata.time': {
                handler: function (v) {
                    if (v && this.newdata.hours) {
                        this.newdata.price = v * this.newdata.hours
                    }
                }
            },
            'newdata.hours': {
                handler: function (v) {
                    if (v && this.newdata.time) {
                        this.newdata.price = v * this.newdata.time
                    }
                }
            },
            'edit.time': {
                handler: function (v) {
                    if (v && this.edit.hours) {
                        this.edit.price = v * this.edit.hours
                    }
                }
            }
        },
        destroyed(){
            if(this.timer){
                clearTimeout(this.timer)
            }
        },
        methods: {
            inputFocus(){
                if(this.timer){
                    clearTimeout(this.timer)
                }
            },
            inputFocusOut(){
                this.timer = setTimeout(() => {
                    window.scrollTo(0,0)
                },10)
            },
            getList(params) {
                this.$api.getRulePriceList(params).then(res => {
                    console.log(res);
                    if (res.data != "") {
                        if (res.data.message.code == 0) {
                            this.ruleList = res.data.data;
                            console.log(this.ruleList);
                            this.nolist = false;
                            if (res.data.data.pages == 1) {
                                Toast("已加载全部数据");
                            }
                        }
                    } else {
                        this.userList = [];
                        Toast("暂无用户");
                    }
                });
            },
            getRule() {
                this.$api.getRule(this.$route.params.id).then(res => {
                    this.ruleData = res.data.data;
                });
            },
            copy(obj) {
                this.$confirm("复制该规则？", "", {}).then(({result}) => {
                    if (result) {
                        this.$api.addCustomPrice(obj).then(res => {
                            if (res.data.message.code == -1) {
                                Toast(res.data.message.message);
                            } else {
                                Toast("复制价格成功");
                                this.getList(this.id);
                            }
                        });
                    } else {
                        Toast("取消复制");
                    }
                });
            },
            showEdit(obj) {
                this.Showedit = true;
                this.edit.id = obj.id;
                this.hiddenClassForDegree = true;
                this.exceedClass = true;
                (this.editchargeType = obj.changeTypeName),
                    (this.edit.chargeType = obj.chargeType),
                    (this.edit.time = obj.time),
                    (this.edit.price = obj.price),
                    (this.edit.hours = obj.hours),
                    (this.edittype = obj.typeName),
                    (this.edit.type = obj.type),
                    (this.edit.granternum = obj.granternum),
                    (this.edit.granterpric = obj.granterpric);
                if (obj.chargeType == '3002' || obj.ruleType == '10001') {
                    this.hiddenClassForDegree = false
                }
                if (obj.chargeType == '3001' && obj.type == '1') {
                    this.exceedClass = false
                }
                if (obj.chargeType == '3001' && obj.type == '2') {
                    this.hiddenClassForDegree = false
                }
                if (obj.chargeType == '3001' && obj.ruleType == '10001') {
                    this.hiddenClassForDegree = false
                }
            },
            newrule() {
                this.Shownew = true;
                this.hiddenClassForDegree = true
                this.exceedClass = false
                this.newmtypeChange(this.mtypeList[0])
                this.newtypeChange(this.typeList[0])
            },
            newrule2() {
                console.log(this.newdata)
                this.$api.addCustomPrice(this.newdata).then(res => {
                    if (res.data.message.code == -1) {
                        Toast(res.data.message.message);
                    } else {
                        Toast("添加价格成功");
                        this.Shownew = false;
                        this.getList(this.id);
                    }
                });
            },
            editrule() {
                this.$api.editCustomPrice(this.edit).then(res => {
                    if (res.data.message.code == -1) {
                        Toast(res.data.message.message);
                    } else {
                        Toast("修改价格成功");
                        this.getList(this.id);
                        this.Showedit = false;
                    }
                });
            },
            deleterule(id) {
                this.$confirm("确定要删除？", "", {}).then(({result}) => {
                    if (result) {
                        this.$api.delCustomPrice(id).then(res => {
                            if (res.data.message.code == -1) {
                                Toast(res.data.message.message);
                            } else {
                                Toast("删除成功");
                                this.getList(this.id);
                            }
                        });
                    } else {
                        Toast("取消删除");
                    }
                });
            },
            editmtypeChange(v) {
                console.log(v)
                this.editchargeType = v.text;
                this.edit.chargeType = v.code;
                this.mtypeShow = false;
            },
            edittypeChange(v) {
                console.log(v)
                this.edittype = v.text;
                this.edit.type = v.id;
                this.typeShow = false;
            },
            newmtypeChange(v) {
                console.log(v)
                this.newchargeType = v.text;
                this.newdata.chargeType = v.code;
                this.mtypeShow = false;
            },
            newtypeChange(v) {
                console.log(v)
                this.newtype = v.text;
                this.newdata.type = v.id;
                this.typeShow = false;
            }
        },
        mounted() {
            this.getRule();
            this.getList(this.id);
            this.$api.getCodesByParent(3).then(res => {
                let a = window.JSON.stringify(res.data.data).replace(/codeName/g, "text");

                let b = window.JSON.parse(a);

                this.mtypeList = b;
            });
        }
    };
</script>
<style scoped>
  .van-popup {
    z-index: 999999999;
  }

  .newcard-box {
    z-index: 999999999;
  }
</style>

